<template>
  <el-dialog 
    title='新增'
    :visible.sync="visible"
    @close='handleClose'
    @open='handleOpen'
    top='18vh'
    size='tiny'
    >
    <div class="form-wrap">
      <el-form ref='ruleManageAdd' :model='form' :rules="rules" label-position='left'>

        <el-form-item v-if='visible' label='假期规则名称' prop='name'>

          <el-input v-model.trim='form.name' style='width:217px' />

        </el-form-item>

        <el-form-item label='自定义请假天数'>
          <el-radio v-model ='form.isCustomLeaveDay' :label='1'>是</el-radio>
          <el-radio v-model ='form.isCustomLeaveDay' :label='0'>否</el-radio>
        </el-form-item>

      </el-form>
    </div>

    <span slot="footer">
      <el-button type='primary' @click.stop="handleSure('ruleManageAdd')">创 建</el-button>
    </span>

  </el-dialog>
</template>

<script>
import { Message, Radio } from 'element-ui'
import Bus from './bus'
import Vue from 'vue'
Vue.use(Radio)
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      visible: false,
      form: {
        isCustomLeaveDay: 1,
        name: ''
      },
      rules: {
        name: [
          {
            required: true, message: '请填写假期规则名称'
          }
        ]
      },
    }
  },
  watch: {
    dialogVisible (newValue) {
      this.visible = newValue
    }
  },

  methods: {

    handleOpen () {
      this.form.name = ''
      this.form.isCustomLeaveDay = 1
    },

    handleClose () {

      this.$emit("update:dialogVisible", false)

    },

    handleSure (formName) {

      this.$refs[formName].validate((valid) => {

        if (valid) {

          const params = {
            name: this.form.name,
            isCustomLeaveDay: this.form.isCustomLeaveDay
          }

          this.Axios
            .Post('/wfConfVacationRule/addVacationRule', params)
            .then(res => {

              if (res.data.status === 1) {
                Message({
                  type: 'success',
                  message: res.data.message
                })
                Bus.$emit('refresh', Math.random())
              }

              this.handleClose()

            })

        } else {

          return false;
        }
      });


    },
  },
}
</script>

<style lang='less' scoped>
.form-wrap {
  padding: 20px 0 0 40px;
}
</style>